.contract-template{
  @include flex;
  overflow: hidden;
  &-header{
    @include flex-center(space-between);
    background-color: #fff;
    box-shadow: 4px 5px 4px 0 rgba(4,19,74,0.04);
    .option-buttons{
      @include items-center;
      font-size: 16px;
      color: #007DFF;
      line-height: 22px;
      .save,
      .cancel{
        @include items-center;
        cursor: pointer;
        :deep(.el-icon){
          margin-right: 4px;
          color: #007DFF;
        }
      }
      .divider{
        width: 4px;
        height: 30px;
        margin: 0 27px;
        background-color: #DCDFE6;
        border-radius: 2px;
      }
    }
  }
  &-body{
    @include flex;
    flex: 1;
    overflow-y: hidden;
    .base-info{
      width: 249px;
      height: 100%;
      overflow-y: auto;
      box-shadow: 4px 0 4px 0 rgba(4,19,74,0.04);
      &-title{
        margin-bottom: 14px;
        font-size: 14px;
        color: #86909C;
        line-height: 22px;
      }
      .list-item-label{
        font-size: 13px;
        color: #1A1A1A;
        line-height: 24px;
      }
      &-text{
        margin-bottom: 20px;
        .list-item{
          @include flex-between;
          align-items: center;
          :deep(.svg-icon){
            cursor: pointer;
          }
          &+.list-item{
            margin-top: 10px;
          }
        }
      }
      &-img{
        margin-bottom: 20px;
        .list-item{
          padding: 4px 8px;
          border-radius: 3px;
          border: 1px solid #DCDFE6;
          cursor: pointer;
          &+.list-item{
            margin-top: 10px;
          }
        }
      }
    }
    .template-design{
      flex: 1;
      overflow-x: auto;
      :deep(.el-form-item){
        margin-bottom: 0;
      }
      :deep(.el-form-item__label){
        @include flex-inline-flex;
        font-size: 14px;
        color: #4E5969;
        line-height: 22px;
      }
      :deep(.el-select__wrapper),
      :deep(.el-input__wrapper),
      :deep(.el-textarea__inner),
      :deep(.el-input__count) {
        background-color: #f2f3f5;
        box-shadow: none;
      }
      :deep(.el-textarea),
      :deep(.el-select){
        width: 264px;
      }
      .design-header{
        @include flex-between;
        border-bottom: 1px solid #E1E6ED;
        .code{
          margin-left: 51px;
          white-space: nowrap;
          font-size: 12px;
          color: #3D3D3D;
          line-height: 24px;
        }
        &-left{
          @include items-center;
        }
      }
      .main-content{
        &-title{
          margin: 36px 0 29px;
          font-size: 18px;
          color: #131414;
          line-height: 24px;
        }
      }
      .additional-modules{
        :deep(.el-checkbox__input.is-checked+.el-checkbox__label){
          font-size: 14px;
          color: rgba(0,0,0,0.9);
          line-height: 22px
        }
        .divider{
          height: 20px;
          background-color: #F5F7FA;
        }
        &-header{
          @include items-center;
          :deep(.el-checkbox-group){
            margin-left: 40px;
          }
          :deep(.svg-icon){
            margin-left: auto;
            cursor: pointer;
          }
        }
        .placeholder-image-container{
          min-height: 20px;
          margin: 10px auto;
          .placeholder-image-item{
            position: relative;
            width: 871px;
            height: 230px;
            margin: 0 auto;
            .del-icon{
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              right: -7px;
              top: -4px;
              z-index: 9;
              height: 16px;
              width: 16px;
              border-radius: 50%;
              background: red;
              color: #fff;
              outline: 2px solid;
              cursor: pointer;
            }
            :deep(.el-image){
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}

// 下拉框搜索框样式
.content-item-search {
  @include items-center;
  :deep(.el-input__wrapper) {
    border: 0;
    box-shadow: none;
    outline: 0;
    background-color: #fff !important;
    &:hover {
      box-shadow: none;
    }
    &.is-focus {
      box-shadow: none;
    }
  }
  :deep(.svg-icon) {
    margin-right: 5px;
    cursor: pointer;
  }
}

.add-template-img{
  position: fixed;
  right: -27px;
  bottom: 0;
  width: 160px;
  height: 160px;
  cursor: pointer;
}

